<script lang="ts">
import { defineComponent, ref, reactive, onMounted } from 'vue';
import { findList } from '../services/Client.ts';
import { insert } from '../services/Contract.ts';
import { findCarList, findCarListByKey } from '../services/Commodity.ts';
import {AxiosResponse} from "axios";

interface Client {
  clientid: string;
  [key: string]: any;
}

interface Car {
  [key: string]: any;
}

interface SaveContract {
  barcode: string;
  clientid: string;
  type: string;
  cars: Car[];
}

export default defineComponent({
  name: 'addOrEditContract',
  props: {
    // 父组件传递的参数
  },
  emits: ['refresh'],

  setup() {
    // 组件是否可见
    const dialogVisible = ref(false);
    // 新增合同对象信息
    const saveContract: SaveContract = reactive({
      barcode: '系统自动生成',
      clientid: '',
      type: '1',
      cars: [],
    });
    // 客户数据
    const clients = ref<Client[]>([]);
    // 选中的客户数据
    const selectClient = ref<Client>({} as Client);
    const addGoodsDialogVisible = ref(false);
    // 货物信息
    const goods = ref<Car[]>([]);
    // 模糊搜索key
    const key = ref('');

    // 确定提交表单
    const commitAdd = () => {
      dialogVisible.value = false;
      insert(saveContract).then(() => {
        (this as any).$message.success('新增购销合同成功');
        (this as any).$emit('refresh');
      });
    };

    // 选中的客户发生变化时调用
    const handleClientSelectChange = (selectid: string) => {
      for (let i = 0; i < clients.value.length; i++) {
        if (clients.value[i].clientid === selectid) {
          selectClient.value = clients.value[i];
          break;
        }
      }
    };

    // 点击搜索货物调用
    const searchGoods = () => {
      findCarListByKey(key.value).then((response:AxiosResponse<any>) => {
        goods.value = response.data.data;
      });
    };

    // 点击添加货物调用
    const addGoods = () => {
      findCarList().then((response:AxiosResponse<any>) => {
        goods.value = response.data.data;
      });
      addGoodsDialogVisible.value = true;
    };

    // 确定添加货物
    const commitAddGoods = () => {
      addGoodsDialogVisible.value = false;
    };

    // 选中的货物发生变化时调用
    const handleGoodsSelectChange = (selection: Car[]) => {
      saveContract.cars = selection;
    };

    // 父组件通过调用该方法显示该组件
    const show = () => {
      dialogVisible.value = true;
      findList().then((response:AxiosResponse<any>) => {
        clients.value = response.data.data;
      });
    };

    onMounted(() => {
      // 可以在这里添加初始化逻辑
    });

    return {
      dialogVisible,
      saveContract,
      clients,
      selectClient,
      addGoodsDialogVisible,
      goods,
      key,
      commitAdd,
      handleClientSelectChange,
      searchGoods,
      addGoods,
      commitAddGoods,
      handleGoodsSelectChange,
      show,
    };
  },
});
</script>

<style lang="css" scoped></style>

<template>
  <div>
    <el-dialog title="新增" v-model="dialogVisible" @close="dialogVisible = false">
      <el-form :model="saveContract" label-width="100px">
        <el-form-item label="合同编码" prop="barcode">
          <el-input v-model="saveContract.barcode" disabled></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="saveContract.type" size="small" clearable>
            <el-option label="省外" value="1"></el-option>
            <el-option label="省内" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="客户信息：" prop="clientid">
          <el-select
              v-model="saveContract.clientid"
              filterable
              clearable
              placeholder="关联"
              @change="handleClientSelectChange"
          >
            <el-option
                v-for="item in clients"
                :key="item.clientid"
                :label="item.name"
                :value="item.clientid"
            ></el-option>
          </el-select>
        </el-form-item>
        <div v-if="saveContract.clientid != ''" style="margin-left: 15px">
          姓名: {{ selectClient.name }} &nbsp;&nbsp;联系电话: {{ selectClient.telephone }} &nbsp;&nbsp;进货地址: {{ selectClient.address }}
        </div>
        <el-divider></el-divider>
        <span>货物信息：</span>
        <el-button size="small" @click="addGoods">添加</el-button>
        <el-table
            v-if="saveContract.cars.length > 0"
            :data="saveContract.cars"
            style="width: 930px"
            stripe
        >
          <el-table-column prop="name" label="名称" width="120" align="center"></el-table-column>
          <el-table-column prop="price" label="价格" width="120" align="center"></el-table-column>
          <el-table-column prop="locality" label="产地" width="120" align="center"></el-table-column>
          <el-table-column prop="accessories" label="附属品" width="120" align="center">
            <template v-slot="rowData">
              <div v-if="rowData.row.accessories.length > 0" v-for="item in rowData.row.accessories">
                {{ item.name }}:{{ item.price }}元
              </div>
              <div v-else>无附属品</div>
            </template>
          </el-table-column>

          <el-table-column prop="locality" label="数量" width="240" align="center">
            <template v-slot="rowData">
              <el-input-number
                  v-model="rowData.row.number"
                  :precision="1"
                  :step="0.1"
                  size="small"
              ></el-input-number>&nbsp;个
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="commitAdd">提交</el-button>
      </div>
      <el-dialog title="汽车列表" v-model="addGoodsDialogVisible" append-to-body>
        <el-input style="width: 240px; margin-right: 10px" size="small" v-model="key"></el-input>
        <el-button type="primary" size="small" @click="searchGoods" style="margin-right: 40px">查询</el-button>
        <el-table :data="goods" @selection-change="handleGoodsSelectChange" height="400">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="name" label="名称" width="120"></el-table-column>
          <el-table-column prop="price" label="价格" width="120"></el-table-column>
          <el-table-column prop="locality" label="产地" width="240"></el-table-column>
        </el-table>
        <el-button type="primary" size="small" @click="commitAddGoods" style="margin-right: 40px">确定</el-button>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>
